<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% 
	String path=request.getContextPath(); 
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	request.setAttribute("basePath", basePath); 
%>

<!DOCTYPE html>
<html>

	<head>
		<title>Single</title>
		<link href="${basePath}view/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link href="${basePath}view/css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="${basePath}view/css/memenu.css" rel="stylesheet" type="text/css" media="all" />
		<link href="${basePath}view/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" href="${basePath}view/css/flexslider.css" type="text/css" media="screen" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script src="${basePath}view/js/jquery.min.js"></script>
		<script src="${basePath}view/js/imagezoom.js"></script>
		<script type="text/javascript" src="${basePath}view/js/memenu.js"></script>
		<script src="${basePath}view/js/simpleCart.min.js"></script>
		<script defer src="${basePath}view/js/jquery.flexslider.js"></script>
		<script src="${basePath}view/js/jquery.magnific-popup.js" type="text/javascript"></script>
	</head>
	<body>
	<!-- header -->
	<div class="header">
		<div class="header-top">
			<div class="container">
				<div class="col-sm-4 world"></div>
				<div class="col-sm-4 logo">
					<a href="${basePath}index.jsp"><img src="${basePath}view/image/logo.png" alt=""></a>	
				</div>
				<div class="col-sm-4 header-left">
						<c:if test="${empty LoginUserName}">
							<p class="log">
								<a href="${basePath}view/login.jsp">Login</a>
								<span>or</span>
								<a href="${basePath}view/register.jsp">Sign&nbsp;Up</a>
							</p>
							<div class="cart box_1"></div>
							<div class="clearfix"></div>
						</c:if>
						<c:if test="${not empty LoginUserName}">
							<p class="log">
								<a href="${basePath}index.jsp">你好:${LoginUserName}!</a>
								<span>or</span>
								<a href="${basePath}user/exit.do">Exit</a>
							</p>
							<div class="cart box_1">
								<div class="total">
									<h3> 
										<a href="${basePath}view/shoppingCart.jsp">
											<img src="${basePath}view/images/cart.png" alt=""/>
										</a>
									</h3>
								</div>
								<p><a href="javascript:void(0);" onclick="clearCart()" class="simpleCart_empty">Empty Cart</a></p>
							</div>
							<div class="clearfix"> </div>
						</c:if>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //header -->
	<!---->
	<div class="single">
		<div class="container">
			<div class="col-md-9">
				<div class="col-md-5 grid">
					<div class="flexslider">
						<ul class="slides">
							<li data-thumb="${basePath}view/${bean.pimage}">
								<div class="thumb-image" > <img style="width:330px; height:400px;" src="${basePath}view/${bean.pimage}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="${basePath}view/${bean.pimage1}">
								<div class="thumb-image" > <img style="width:330px; height:400px;" src="${basePath}view/${bean.pimage1}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="${basePath}view/${bean.pimage2}">
								<div class="thumb-image" > <img style="width:330px; height:400px;" src="${basePath}view/${bean.pimage2}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-7 single-top-in">
					<div class="single-para simpleCart_shelfItem">
						<h1>${bean.pname}</h1>
						<p>${bean.pdesc}</p>
						<div class="star-on"></div>

						<label class="add-to item_price">&yen;${bean.price}</label>
						
						<div class="available">
							<h6>Available Options :</h6>
							<ul>
								<li>Size:
									<select>
										<option>Large</option>
										<option>Medium</option>
										<option>small</option>
									</select>
								</li>
							</ul>
							<br />
							<form action="${basePath}cart/add.do" method="post" id="form1">
							
								<input type="hidden" name="pid" value="${bean.pid}" />
								<ul>
									<li>
										Buy&nbsp;Count :<input type="text" name="count" value="1" size="6" />
									</li>
								</ul>
							</form>
						</div>
						<c:if test="${empty LoginUserName}">
							<a href="javascript:void(0)" onclick="loginForm()" class="cart item_add">Add To Cart</a>
						</c:if>
						<c:if test="${not empty LoginUserName}">
							<a href="javascript:void(0)" onclick="subForm()" class="cart item_add">Add To Cart</a>
						</c:if>
					</div>
				</div>
			</div>
		
			<div class="col-md-3 product-bottom">
				<div class=" rsidebar span_1_of_left">
					<h3 class="cate">Categories</h3>
						<ul class="menu-drop">
							<li class="item1"><a href="#">Men </a>
								<ul class="cute">
									<li class="subitem1"><a href="#">Cute Kittens </a></li>
									<li class="subitem2"><a href="#">Strange Stuff </a></li>
									<li class="subitem3"><a href="#">Automatic Fails </a></li>
								</ul>
							</li>
							<li class="item2"><a href="#">Women </a>
								<ul class="cute">
									<li class="subitem1"><a href="#">Cute Kittens </a></li>
									<li class="subitem2"><a href="#">Strange Stuff </a></li>
									<li class="subitem3"><a href="#">Automatic Fails </a></li>
								</ul>
							</li>
							<li class="item3"><a href="#">Kids</a>
								<ul class="cute">
									<li class="subitem1"><a href="#">Cute Kittens </a></li>
									<li class="subitem2"><a href="#">Strange Stuff </a></li>
									<li class="subitem3"><a href="#">Automatic Fails</a></li>
								</ul>
							</li>
							<li class="item4"><a href="#">Accesories</a>
								<ul class="cute">
									<li class="subitem1"><a href="#">Cute Kittens </a></li>
									<li class="subitem2"><a href="#">Strange Stuff </a></li>
									<li class="subitem3"><a href="#">Automatic Fails</a></li>
								</ul>
							</li>
							<li class="item4"><a href="#">Shoes</a>
								<ul class="cute">
									<li class="subitem1"><a href="#">Cute Kittens </a></li>
									<li class="subitem2"><a href="#">Strange Stuff </a></li>
									<li class="subitem3"><a href="#">Automatic Fails </a></li>
								</ul>
							</li>
						</ul>
				</div>
			</div>
		</div>
	</div>
</body>
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
				animation: "slide",
				controlNav: "thumbnails"
			});
		});
	</script>
	<script type="text/javascript">
		$(function() {
		    var menu_ul = $('.menu-drop > li > ul'),
		           menu_a  = $('.menu-drop > li > a');
		    menu_ul.hide();
		    menu_a.click(function(e) {
		        e.preventDefault();
		        if(!$(this).hasClass('active')) {
		            menu_a.removeClass('active');
		            menu_ul.filter(':visible').slideUp('normal');
		            $(this).addClass('active').next().stop(true,true).slideDown('normal');
		        } else {
		            $(this).removeClass('active');
		            $(this).next().stop(true,true).slideUp('normal');
		        }
		    });
		
		});
	</script>
	<script type="text/javascript">
		function subForm(){
			document.getElementById("form1").submit();
		}
		
		function loginForm(){
			confirm("亲，你还没有登录呢，不能加入购物车哟！")
		}
		
		function clearCart(){
			if(confirm("您确定要清空购物车吗？")){
				location.href="${basePath}cart/clear.do";
			}
		}
	</script>
</html>